<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Remdator Examples</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="../../jquery-ext.js" type="text/javascript"></script>
<script src="../../remdator-exceptions.js" type="text/javascript"></script>
<script src="../../DataElement.js" type="text/javascript"></script>
<script src="../../SingleDataElement.js" type="text/javascript"></script>
<script src="../../DataStore.js" type="text/javascript"></script>

<script type="text/javascript">
<!--
	//logging functions
	function log($message, $bold)
	{
		if ($bold)
		{
			$("#message").append("<b>"+$message + "</b><br />");
		}
		else
		{
			$("#message").append($message + "<br />");
		}
	}
	function clearlog()
	{
		$("#message").html("");
	}
	//end logging functions
	
	
	
	var $datastore = null;

	function create()
	{
		clearlog();
		
		$datastore = new $.remdator.DataStore({
			initValue : "initial value"
		});
		
		$datastore.addChangeListener({
			listener : function($eventArgs) {
				var $source = $eventArgs.source;
				
				log("Change listener has been triggered.");
				log("Value of remdator object that fired event: " + $source.getValue());
				log("<br />");
			}
		});
		
		log("Created data store", true);
		log("Value of data store: " + $datastore.getValue());
		log("<br />");
	}
	
	function setValue()
	{
		clearlog();
		
		var $newvalue = $("#value").val();
		$datastore.setValue({ value : $newvalue });
		
		log("Set value of data store", true);
		log("Value of data store: " + $datastore.getValue());
		log("<br />");
	}
	
	$(document).ready(function() {
		create();
	});
//-->
</script>  
</head>
<body>
	<div id="message"></div>
	<input type="button" value="Recreate data store" onclick="create();" /><br />
	<input type="button" value="Set value" onclick="setValue();" /><br />
	Value: <input type="text" id="value" /><br />
</body>
</html>